<template>
  <div>
    <template v-for="item in defaultAttribute" :key="item">
      <a-form-item v-if="item" :label="item.title">
        <a-input-number
          v-if="item?.type == 'numberinputbox'"
          v-model:value="item.val"
        />
        <!--全屏问题，color-picker无法在全屏显示-->
        <a-input
          v-else-if="item?.type == 'colorinputbox' && isFullscreen"
          type="color"
          v-model:value="item.val"
        />
        <color-picker
          v-else-if="item?.type == 'colorinputbox' && !isFullscreen"
          useType="pure"
          v-model:pureColor="item.val"
        />
        <a-input
          v-else-if="item?.type == 'textinputbox'"
          :placeholder="`请输入${item.title}`"
          v-model:value="item.val"
        />
        <a-input
          v-else-if="item?.type == 'textareainputbox'"
          :placeholder="`请输入${item.title}`"
          type="textarea"
          v-model:value="item.val"
        />
        <a-radio-group
          v-model:value="item.val.selectval"
          v-else-if="item?.type == 'radiogroup'"
        >
          <a-space>
            <a-radio
              v-for="ridioitem in item.val.ridiogroup"
              :key="ridioitem.value"
              :value="ridioitem.value"
            >
              {{ ridioitem.label }}
            </a-radio>
          </a-space>
        </a-radio-group>
        <a-select
          style="width: 150px"
          v-else-if="item?.type == 'select'"
          :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          v-model:value="item.val.selectval"
          :options="item.val.selectgroup"
        />
      </a-form-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ['defaultAttribute'],
  inject: ['getScreenStatus'],
  computed: {
    isFullscreen() {
      return this.getScreenStatus();
    },
  },
};
</script>
<style lang="less" scoped>
.ant-input-number,
input {
  width: 160px;
  border-radius: 4px;
  border-color: #ddd;
}
</style>
